<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/freedom.css"/>
    <link rel="stylesheet" type="text/css" href="css/login.css"/>
    <link rel="stylesheet" type="text/css" href="css/animate.css"/>
    <title>首页index</title>



</head>
<style>

</style>



<body>
<div class="main"><!--考虑到兼容问题，这里不能main标签,因为它会和定位冲突-->

    <header>
            <section><img src="img/logo.jpg"></section>
            <nav class="btn_nav">
                    <span></span>
                    <span></span>
                    <span></span>
            </nav>
             <ul class="phone_nav">
                        <li><a href="index.html">主页</a></li>
                        <li><a href="featurn.html">特色推荐</a></li>
                        <li><a href="listen.html">随心听</a></li>
                        <li><a href="freedom.html">自由行</a></li>
                        <li><a href="aboutus.html">关于我们</a></li>
                     <li class="login_btn"><a>登录/注册</a></li>
             </ul>   
    </header>
    <div class="title_free">
            <header>
                    <img src="img/freedom.png">
            </header>
            <p>根据您的实时所在位置定制专属的<br>
                游玩路线让您不再为下一个景点去<br>哪而费神</p>
    </div>
    <article class="content">
        <article class="content_width">
           
                <section>
                        <header>
                                <img src="img/freedom.png">
                        </header>
                        <p>根据您的实时所在位置定制专属的游玩路线<br>
                                让您不再为下一个景点去哪而费神</p>
                        <ul class="f_ulA">
                            <li><div class="bg"></div><img class="scaleImg" src="img/f1.png"><span class="wz"><img src="img/wz.png"></span></li>
                            <li><div class="bg"></div><img class="scaleImg" src="img/f2.png"><span class="wz"><img src="img/wz.png"></span></li>      
                            <li><div class="bg"></div><img class="scaleImg" src="img/f3.png"><span class="wz"><img src="img/wz.png"></span></li>   
                        </ul>
                        <ul class="f_ulB">
                                <li><img src="img/s1.jpg"></li>
                                <li><img src="img/s2.jpg"></li>      
                                <li><img src="img/s3.jpg"></li>   
                        </ul>
                </section>
                <aside>
                    
                            <div class="imgbox">
                                    <img class="imgline" src="img/line1.png">
                                    <section></section>
                            </div>    
                
                </aside>
        </article>
    </article>
    <p>岭南印象园APP   联系电话：400-511-3420</p>
</div>
<!--login-->
<article class="login">
                <section>
                        <article class="logo">
                                <img src="img/bigLogo.png">
                        </article>
                </section>
                <aside>
                    <div class="btn">
                            <span class="dlbtn">登录</span><span class="zcbtn">注册</span>
                    </div>
                    <form class="login_form">
                            <input type="type" placeholder="用户名"/>
                            <input type="type" placeholder="密码"/>
                            <span>忘记密码？</span>
                            <button>登录</button>
                    </form>
                    <form class="register">
                            <input type="type" placeholder="用户名"/>
                            <input type="type" placeholder="密码"/>
                            <input type="type" placeholder="密码"/>
                            <button>注册</button>
                    </form>
                    <ul>
                        <li><img src="img/qq.png"></li>
                        <li><img src="img/wechat.png"></li>
                        <li><img src="img/weibo.png"></li>
                    </ul>

                     <span class="close"><img src="img/close.png"></span>   
                </aside>
</article>

</body>
<script src="js/response.js"></script>
<script src="js/denglu.js"></script>
<script>
var f_ulA = document.querySelector(".f_ulA");
var scaleImg = document.querySelectorAll(".scaleImg");
var wz = document.querySelectorAll(".wz");
var  bg = document.querySelectorAll(".bg");
var imgbox = document.querySelector(".imgbox .imgline");

var arrLine = ["img/line1.png","img/line2.png","img/line3.png"];
for(let i = 0; i<f_ulA.children.length;i++){
        f_ulA.children[i].addEventListener("click",function(){
                for(var j = 0; j<bg.length;j++){
                        scaleImg[j].style.transform = "translate(-50%,-50%)" ;
                        bg[j].style.display ="block";  
                        wz[j].style.display = "none";
                      
                }
                bg[i].style.display ="none";
                scaleImg[i].style.transform = "translate(-50%,-50%) scale(1.2)";
                wz[i].style.display = "block";
                console.log(111);
                imgbox.src = arrLine[i];

        })
}
var f_ulB = document.querySelector(".f_ulB");
for(let i = 0; i<f_ulB.children.length;i++){
        f_ulB.children[i].addEventListener("click",function(){
                imgbox.src = arrLine[i];
        })
}

        
</script>

</html>